<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>




<!DOCTYPE html>
<html>

<head>
  <base href="/oa/" />
  <title>襄阳蓝芯智能化办公系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/bootstrapvalidator/css/bootstrapValidator.css"
        rel="stylesheet">

  <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.10.2.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/js/bootstrapValidator.js"></script>

</head>
<body>

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">编辑购买申请单</h4>
  </div>

  <div class="panel-body">
    <form action="${pageContext.request.contextPath}/zc-assetpurchaseapply/editZcAssetpurchaseapply" id="myform" method="post"
          class="form-horizontal" role="form">
      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="docNo" class="col-md-4 control-label">申请单号</label>
          <div class="col-md-8">
            <input type="hidden" id="oid" name="oid" value="${zcAssetpurchaseapply.oid}">
            <input type="hidden" name="createDate" value="${zcAssetpurchaseapply.createDate}">
            <input type="text" id="docNo" name="docNo" readonly="readonly"
                   class="form-control" placeholder="提交后自动生成" value="${zcAssetpurchaseapply.docNo}">
          </div>
        </div>

        <div class="form-group col-md-6">
          <label for="sex" class="col-md-4 control-label">申请人</label>
          <div class="col-md-8">
            <input type="hidden" id="proposer" name="proposer" value="${zcAssetpurchaseapply.proposer}">
            <div class="input-group">
              <input type="text" id="empName" name="empName"
                     readonly="readonly" class="form-control" placeholder="请选择申请人"
                     value="${empName}">
              <span class="input-group-btn">
									<button class="btn btn-info" type="button" data-toggle="modal"
                                            data-target="#selectempModal">请选择</button>
								</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="form-group col-md-6">
          <label for="flowid" class="col-md-4 control-label">购买审批流程</label>
          <div class="col-md-8">
            <select name="flowid" class="form-control" id="flowid">
              <option value="">--请选择--</option>
              <c:forEach items="${lcFlow}" var="flow">
                <option value="${flow.oid}" <c:if test="${flow.oid eq zcAssetpurchaseapply.flowid}">selected</c:if>>${flow.flowName}</option>
              </c:forEach>

            </select>
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="reason" class="col-md-4 control-label">采购事由</label>
          <div class="col-md-8">
            <input type="text" id="reason" name="reason"
                   class="form-control" placeholder="请填写采购事由" value="${zcAssetpurchaseapply.reason}">
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="form-group col-md-12">
          <label for="remark" class="col-md-2 control-label">备注</label>
          <div class="col-md-10">
							<textarea class="form-control" id="remark" name="remark" rows="5"
                                      placeholder="请输入备注">${zcAssetpurchaseapply.remark}</textarea>
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="form-group col-md-12">
          <hr>
        </div>
      </div>

      <div id="details">
        <div class="col-md-12" style="display: none;" id="detailsTitle">
          <div align="center">
            <h4><label class="text-primary">购买明细</label></h4><BR> <BR>
          </div>
        </div>

      </div>

      <!-- 回显已有明细 -->
      <c:forEach items="${details}" var="detail" varStatus="status">
        <div id="detail-${status.index}">
          <div class="col-md-12">
            <div class="form-group col-md-5">
              <label for="assetName" class="col-md-4 control-label">资产名称</label>
              <div class="col-md-8">
                <input type="text" name="assetName" class="form-control"
                       placeholder="请输入资产名称" value="${detail.assetName}">
              </div>
            </div>
            <div class="form-group col-md-5">
              <label for="assetNumber" class="col-md-4 control-label">序列号</label>
              <div class="col-md-8">
                <input type="text" name="assetNumber" class="form-control"
                       placeholder="请输入序列号" value="${detail.assetNumber}">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group col-md-5">
              <label for="guige" class="col-md-4 control-label">资产规格</label>
              <div class="col-md-8">
                <input type="text" name="guige" class="form-control"
                       placeholder="请输入资产规格" value="${detail.guige}">
              </div>
            </div>
            <div class="form-group col-md-5">
              <label for="purchaseDate" class="col-md-4 control-label">购买日期</label>
              <div class="col-md-8">
                <input type="date" name="purchaseDate" class="form-control"
                       placeholder="请输入购买日期"
                       value="${detail.purchaseDate}">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group col-md-5">
              <label for="unitPrice" class="col-md-4 control-label">预计单价</label>
              <div class="col-md-8">
                <input type="text" name="unitPrice" class="form-control"
                       placeholder="请输入资产预计单价" value="${detail.unitPrice}">
              </div>
            </div>
            <div class="form-group col-md-5">
              <label for="quantity" class="col-md-4 control-label">购买数量</label>
              <div class="col-md-8">
                <input type="number" name="quantity" class="form-control"
                       placeholder="请输入购买数量" value="${detail.quantity}">
              </div>
            </div>
            <div class="form-group col-md-2">
              <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group col-md-12">
              <hr>
            </div>
          </div>
        </div>
      </c:forEach>

      <div class="col-md-12">
        <div class="form-group col-md-12">
          <div class="col-md-10  col-md-offset-2">
            <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
            <button type="button" id="addDetails" class="btn btn-success">添加购买明细</button>
            <button type="button" id="editapplybtn" class="btn btn-success">提交信息</button>
            <button type="reset" id="resetbtn" class="btn btn-default">取消操作</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 购买明细模板 -->
<div id="detailsdemo" style="display: none;">
  <div>
    <div class="col-md-12">
      <div class="form-group col-md-5">
        <label for="assetName" class="col-md-4 control-label">资产名称</label>
        <div class="col-md-8">
          <input type="text" name="assetName" class="form-control"
                 placeholder="请输入资产名称">
        </div>
      </div>
      <div class="form-group col-md-5">
        <label for="assetNumber" class="col-md-4 control-label">序列号</label>
        <div class="col-md-8">
          <input type="text" name="assetNumber" class="form-control"
                 placeholder="请输入序列号">
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group col-md-5">
        <label for="guige" class="col-md-4 control-label">资产规格</label>
        <div class="col-md-8">
          <input type="text" name="guige" class="form-control"
                 placeholder="请输入资产规格">
        </div>
      </div>
      <div class="form-group col-md-5">
        <label for="purchaseDate" class="col-md-4 control-label">购买日期</label>
        <div class="col-md-8">
          <input type="date" name="purchaseDate" class="form-control"
                 placeholder="请输入购买日期">
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group col-md-5">
        <label for="unitPrice" class="col-md-4 control-label">预计单价</label>
        <div class="col-md-8">
          <input type="text" name="unitPrice" class="form-control"
                 placeholder="请输入资产预计单价">
        </div>
      </div>
      <div class="form-group col-md-5">
        <label for="quantity" class="col-md-4 control-label">购买数量</label>
        <div class="col-md-8">
          <input type="number" name="quantity" class="form-control"
                 placeholder="请输入购买数量">
        </div>
      </div>
      <div class="form-group col-md-2">
        <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
      </div>
    </div>

    <div class="col-md-12">
      <div class="form-group col-md-12">
        <hr>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="selectempModal" tabindex="-1" role="dialog" aria-labelledby="selectempModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="selectempModalLabel">选择员工</h4>
      </div>
      <div class="modal-body">
        <form action="" class="form-horizontal" role="form">
          <div class="form-group">
            <label for="dept" class="col-md-4 control-label">所属部门</label>
            <div class="col-md-5">
              <select name="dept" class="form-control" id="dept">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="job" class="col-md-4 control-label">所属职位</label>
            <div class="col-md-5">
              <select name="job" class="form-control" id="job">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="emp" class="col-md-4 control-label">员工信息</label>
            <div class="col-md-5">
              <select name="emp" class="form-control" id="emp" size="10">
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="sub" class="btn btn-primary">确认选择</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptUseSelect",function(listdept){
      var dept = $("#dept")[0];
      dept.options.length=1;
      for(var i=0;i<listdept.length;i++){
        var d = listdept[i];
        dept.options.add(new Option(d.deptName,d.oid));
      }
    });

    $("#dept").change(function(){
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
      if(this.value==""){
        return;
      }
      $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptJobUseSelect",{deptid:this.value},function(listjob){
        var job = $("#job")[0];
        job.options.length=1;
        for(var i=0;i<listjob.length;i++){
          var job1 = listjob[i];
          job.options.add(new Option(job1.name,job1.oid));
        }
      });

      $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete",{deptid:$("#dept").val()},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    $("#job").change(function(){
      $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete2",{deptid:$("#dept").val(),jobid:this.value},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    $("#sub").click(function(){
      var eid=$("#emp").val();
      if(eid!=null){
        var empName=$("#emp option:selected").text();
        setempvalue(eid,empName);
        $('#selectempModal').modal('hide');
      }else{
        alert("请选择员工");
      }

    });

    $('#selectempModal').on('show.bs.modal',function() {
      $("#dept").val("");
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
    });
  });
</script>






<script type="text/javascript">
  $(document).ajaxError(function(event,xhr) {
    if(xhr.status=="403"){//没有权限
      document.location.href = xhr.getResponseHeader("url");
    }else if(xhr.status!="200"){
      //alert("服务器错误!");
      console.log("服务器错误!");
    }
  });
</script>

<!-- 模态框（Modal） -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xs">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="alertMsgModalLabel">
          提示
        </h4>
      </div>
      <div class="modal-body" id="alertmsg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  function setempvalue(eid, empName) {
    $("#proposer").val(eid);
    $("#empName").val(empName);
  }
</script>
</body>



<script type="text/javascript">
  function deteleDetails(o){
    $(o).parent().parent().parent().remove();
    if($("#details").children().length==1){
      $("#detailsTitle").hide();
    }
  }

  $(document).ready(function() {

    $("#addDetails").click(function(){
      $("#detailsTitle").show();
      $("#details").append($("#detailsdemo").html());
      $('#myform').bootstrapValidator('addField', 'assetName', {
        validators: {
          notEmpty : {/*非空提示*/
            message : '资产名称不能为空!'
          }

        }
      });
      $('#myform').bootstrapValidator('addField', 'purchaseDate', {
        validators: {
          notEmpty : {/*非空提示*/
            message : '购买时间不能为空!'
          }

        }
      });
      $('#myform').bootstrapValidator('addField', 'unitPrice', {
        validators: {
          notEmpty : {/*非空提示*/
            message : '预计价格不能为空!'
          },
          regexp: {
            regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
            message: '预计价格格式不正确,金额必须大于0!'
          }
        }
      });
      $('#myform').bootstrapValidator('addField', 'quantity', {
        validators: {
          notEmpty : {/*非空提示*/
            message : '购买数量不能为空!'
          },
          greaterThan: {
            value: 1,
            inclusive: true,
            message: '购买数量必须大于0!'
          }
        }
      });
    });

    $("#myform").bootstrapValidator({
      message : 'This value is not valid',
      feedbackIcons : {/*input状态样式图片*/
        valid : 'glyphicon glyphicon-ok',
        invalid : 'glyphicon glyphicon-remove',
        validating : 'glyphicon glyphicon-refresh'
      },
      fields : {
        flowid : {
          validators : {
            notEmpty : {/*非空提示*/
              message : '请选择购买流程!'
            }
          }
        },
        reason : {
          validators: {
            notEmpty : {/*非空提示*/
              message : '采购事由不能为空!'
            }
          }
        }
      },
      submitHandler : function(validator,form, submitButton) {
        validator.defaultSubmit();
      }
    });


    $("#resetbtn").click(function() {
      $("#myform").data("bootstrapValidator").resetForm();
    });

    $("#editapplybtn").click(function() {
      $('#myform').data("bootstrapValidator").validate();
      if($('#myform').data("bootstrapValidator").isValid()){
        var assetNames = new Array();
        var isValid = true;
        $("input[name='assetName']").each(function(){
          var assetName = $(this).val();
          if($.inArray(assetName, assetNames) !== -1){
            $("#alertmsg").text("购买明细中资产名称不能重复!");
            $('#alertMsgModal').modal('show');
            isValid = false;
            return false; // 退出each循环
          }
          assetNames.push(assetName);
        });
        if(isValid){
          $('#myform')[0].submit();
        }
      }
    });

  });


</script>
</html>
